import React from 'react';
import { Text } from 'react-native';
import PropTypes from 'prop-types';
import { px2dp, noop } from 'bee/utils';
import { colors } from 'bee/themes';
import { Names, Icons } from './Icons';

const Icon = ({ size, onPress, name, color, style }) => (
  <Text
    style={[
      {
        color,
        fontSize: size,
        fontFamily: 'iconfont',
      },
      style,
    ]}
    onPress={onPress}
  >
    {Icons[name]}
  </Text>
);

Icon.propTypes = {
  size: PropTypes.number,
  onPress: PropTypes.func,
  name: PropTypes.string.isRequired,
  color: PropTypes.string,
};

Icon.defaultProps = {
  size: px2dp(36),
  onPress: noop,
  color: colors['1101'],
};

export { Names, Icon };
